<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户-商品页面</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="app">
    <div style=" height: 60px; margin-bottom: 20px; background-color: #7fce67">
        <h2 style="float: left; margin-left: 230px; line-height: 60px;">客户-商品页面</h2>
        <h2 style="float: right; margin-right: 230px;line-height: 60px; cursor: pointer" @click="aboutM()">
            欢迎，{{username}}
        </h2>
    </div>
    &nbsp;&nbsp;<el-button type="success" class="butT" @click="shoppingCart()">订单</el-button>
    <el-table
            :data="commodityList"
            stripe
            style="width: 100%">
        <el-table-column
                prop="name"
                label="商品名称"
                width="310">
        </el-table-column>
        <el-table-column
                prop="price"
                label="价格（元/件）"
                width="300">
        </el-table-column>
        <el-table-column
                prop="inventory"
                label="库存（件）"
                width="300">
        </el-table-column>
        <el-table-column
                prop="volume"
                label="销量（件）"
                width="300">
        </el-table-column>
        <el-table-column
                label="操作"
                width="300">
            <template slot-scope="scope">
                <el-button @click="handleLook(scope.row)" type="text" style="color: #13ce66">查看</el-button>
                <el-button @click="lookComment(scope.row)" type="text" style="color: #13ce66">查看留言</el-button>
                <el-button @click="popAddComment(scope.row)" type="text" style="color: #13ce66">添加留言</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--查看购物车 start-->
    <el-dialog title="购物车" :visible.sync="lookCartFormVisible">
        <el-table
                :data="cart"
                style="width: 700px">
            <el-table-column
                    prop="name"
                    label="商品名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="quantity"
                    label="数量（件）"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格(元/件)"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="日期"
                    width="200">
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="lookCartFormVisible = false">取消</el-button>
        </div>
    </el-dialog>
    <!--查看购物车 end-->

    <!--查看并加入购物车框 start-->
    <el-dialog title="查看详情" :visible.sync="lookDialogFormVisible">
        <el-form ref="dataEditForm" :model="commodity" :rules="rules" label-position="right" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="名称" prop="name">
                        {{commodity.name}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="价格" prop="price">
                        ￥{{commodity.price}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="库存" prop="inventory">
                        {{commodity.inventory}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="销量" prop="volume">
                        {{commodity.volume}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="购买数量" prop="quantity">
                        <!--<el-input v-model="cart.quantity"/>-->
                        <el-input-number v-model="commodity.quantity" @change="handleChange" :min="1" :max="commodity.inventory">
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="图片" prop="image">
                        <img :src="commodity.image" style="width: 200px; height: 200px;"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="lookDialogFormVisible = false">取消</el-button>
            <el-button type="success" @click="addCart()">下单</el-button>
        </div>
    </el-dialog>
    <!--查看框 end-->

    <!--查看留言 start-->
    <el-dialog title="查看留言" :visible.sync="lookCommentFormVisible">
        <el-table
                :data="comment"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="客户名称"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="内容"
                    width="300">
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="lookCommentFormVisible = false">取消</el-button>
        </div>
    </el-dialog>
    <!--查看留言 end-->

    <!--添加留言 start-->
    <el-dialog title="添加留言" :visible.sync="addCommentFormVisible">
        <el-form ref="dataEditForm" :model="comment" :rules="rules" label-position="right" label-width="100px">
            <el-row>
                <el-col :span="12" style="display: none">
                    <el-form-item label="名称" prop="commodityId">
                        {{commodity.commodityId}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="内容" prop="content">
                        <el-input v-model="comment.content"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addCommentFormVisible = false">取消</el-button>
            <el-button type="success" @click="addComment()">确定</el-button>
        </div>
    </el-dialog>
    <!--添加留言 end-->

    <!--客户 信息-->
    <el-dialog title="编辑" :visible.sync="aboutMFormVisible">
        <el-form ref="dataEditForm" :model="customer" :rules="rules" label-position="right" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="customer.name"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="customer.password"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="电话" prop="phone">
                        <el-input v-model="customer.phone"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地址" prop="address">
                        <el-input v-model="customer.address"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12" style="display: none">
                    <el-form-item label="ID" prop="customerId">
                        {{customer.customerId}}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="aboutMFormVisible = false">取消</el-button>
            <el-button type="primary" @click="updateM()">确定</el-button>
        </div>
    </el-dialog>
    <!---->
</div>
</body>

<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>

    var vue = new Vue({
        el: '#app',
        data: {
            username:localStorage.getItem("username"),
            commodityList: [],
            commodity: [],
            comment: [],
            lookDialogFormVisible: false,   //查看框
            lookCommentFormVisible: false,  //查看留言框
            lookCartFormVisible: false,     //查看购物车
            addCommentFormVisible: false,   //添加留言框
            cart: [],
            num: 1,
            aboutMFormVisible: false,
            customer: [],

        },
        created() {
            this.selectAll();
        },
        methods: {
            selectAll(){
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/selectAll"
                }).then(function (resp) {
                    _this.commodityList = resp.data.data;
                })
            },
            //计数器
            handleChange(value) {
                //console.log(value);
            },
            //加入购物车
            addCart(row){
                console.log(localStorage.getItem("userId"));
                this.commodity.customerId = localStorage.getItem("userId");
                //this.lookDialogFormVisible = false;
                var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/cart/insert",
                    data:{
                        ...this.commodity,
                    }
                }).then(function (resp) {
                    if(resp.data.code === 20011){
                        _this.$message.success(resp.data.msg);
                        _this.lookDialogFormVisible = false;
                    }else {
                        _this.$message.error(resp.data.msg);
                    }
                })
            },
            //查看详细
            handleLook(row) {
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/selectById/" + row.commodityId
                }).then(function (resp) {
                    if(resp.data.code === 20031){
                        _this.commodity = resp.data.data;
                        _this.lookDialogFormVisible = true;
                    }else {
                        _this.$message.error(resp.data.msg);
                    }
                })
            },
            //查看留言
            lookComment(row){
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/comment/selectAll/" + row.commodityId
                }).then(function (resp) {
                    if(resp.data.code === 20031){
                        _this.comment = resp.data.data;
                        _this.lookCommentFormVisible = true;
                    }else {
                        _this.$message.error(resp.data.msg);
                    }
                })
            },
            //查看购物车
            shoppingCart(){
                this.commodity.customerId = localStorage.getItem("userId");
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/cart/selectByC/" + _this.commodity.customerId
                }).then(function (resp) {
                    if(resp.data.code === 20031){
                        _this.cart = resp.data.data;
                        _this.lookCartFormVisible = true;
                    }else {
                        _this.$message.error(resp.data.msg);
                    }
                })

            },
            //重置留言框
            resetComment(){
                this.comment = {};
            },
            //弹出添加留言框
            popAddComment(row){
                this.commodity.commodityId = row.commodityId;
                this.addCommentFormVisible = true;
                this.resetComment();
            },
            //添加留言
            addComment(){
                this.comment.customerId = localStorage.getItem("userId");
                this.comment.name = localStorage.getItem("username");
                this.comment.commodityId = this.commodity.commodityId;
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/comment/insert",
                    data: _this.comment
                }).then(function (resp) {
                    //如果操作成功，关闭弹窗，刷新数据
                    //console.log(resp.data);
                    if(resp.data.code === 20011){    //成功
                        _this.addCommentFormVisible = false;
                        _this.$message.success(resp.data.msg);
                    }else if(resp.data.code === 20010){     //失败
                        _this.$message.error(resp.data.msg);
                    }else {
                        _this.$message.error(resp.data.msg);
                    }
                }).finally(function () {
                    _this.selectAll();
                });
            },


            //查看商家(管理员)详细信息
            aboutM(){
                var _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/customer/selectByName/" + _this.username,
                }).then(function (resp) {
                    if(resp.data.code === 20031){
                        _this.customer = resp.data.data;
                        _this.aboutMFormVisible = true;
                    }else {
                        _this.$message.error(resp.data.msg);
                    }
                })
            },
            //确认编辑商家信息
            updateM(){
                var _this = this;
                axios({
                    method: "put",
                    url: "http://localhost:8080/customer/update",
                    data: _this.customer
                }).then(function (resp) {
                    //如果操作成功，关闭弹窗，刷新数据
                    //console.log(resp.data);
                    if(resp.data.code === 20041){    //成功
                        _this.aboutMFormVisible = false;
                        _this.$message.success(resp.data.msg);
                    }else if(resp.data.code === 20040){     //失败
                        _this.$message.error(resp.data.msg);
                    }else {
                        _this.$message.error(resp.data.msg);
                    }
                })
            },


        },
    });
</script>
</html>